<script lang="ts" setup>
import type { Feedback01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed, ref } from 'vue'
import './RenderFeedback01.less'

defineOptions({
  name: 'RenderFeedback01',
})

const props = defineProps<{
  render: Feedback01ComponentMeta
}>()

const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
const selectedOption = ref('')
const selectSty = computed(() => {
  if (designStore.config.platform === 'mobile') {
    return { width: '100%' }
  }
  else {
    return { width: '100%', height: '50px', background: '#F5F5F5', border: 'none' }
  }
})
const inputSty = computed(() => {
  if (designStore.config.platform === 'mobile') {
    return { lineHright: 0 }
  }
  else {
    return { width: '100%', background: '#F5F5F5', border: 'none' }
  }
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('messagebox')">
      <div :class="prefix('messagetop')">
        <div :class="prefix('messagetitle')">
          {{ props.render.config.title }}
        </div>
        <div :class="prefix('messagedesc')">
          {{ props.render.config.description }}
        </div>
        <div v-if="platform === 'pc'" :class="prefix('messagedata')">
          <div :class="prefix('mesdataleft')">
            <span>姓*名</span>
            <span>188****8686</span>
            <span :class="prefix('mesdatacourse')">课程课程课程课程课程课程课程课程课程</span>
          </div>
          <span>1小时前</span>
        </div>
      </div>
      <div :class="prefix('messageinfo')">
        <div v-if="props.render.config.isShowUserName" :class="prefix('mesinput')">
          <i class="iconfont icon-moban1_xingming" :class="prefix('iconfont')" />
          <input :placeholder="props.render.config.userName" :style="inputSty" :bordered="false">
        </div>
        <div v-if="props.render.config.isShowMobile" :class="prefix('mesinput')">
          <i class="iconfont icon-moban1_shoujihao" :class="prefix('iconfont')" />
          <input :placeholder="props.render.config.mobile" :style="inputSty" :bordered="false">
        </div>
        <div v-if="props.render.config.isShowArea" :class="prefix('mesinput')">
          <i class="iconfont icon-moban1_chengshi" :class="prefix('iconfont')" />
          <input :placeholder="props.render.config.area" :style="inputSty" :bordered="false">
        </div>
        <div v-if="props.render.config.isShowCourse" :class="[prefix('mesinput'), prefix('messelect')]">
          <i class="iconfont icon-moban1_kecheng " :class="prefix('iconfont')" />
          <i class="iconfont icon-bianjiqi_jiantou_you " :class="prefix('arrow-iconfont')" />
          <select
            v-model="selectedOption" size="large" :style="selectSty"
            :bordered="platform === 'mobile' ? true : false" :class="platform === 'mobile' ? 'mobile' : 'pc'"
            :dropdown-menu-style="{ maxWidth: '200px', backgroundColor: 'lightblue' }"
          >
            <option disabled value="">
              {{ props.render.config.course }}
            </option>
          </select>
        </div>
        <div v-if="props.render.config.isShowRemark && platform === 'mobile'" :class="prefix('mesinput')">
          <i class="iconfont icon-bianjiqi_bianji" :class="prefix('iconfont')" />
          <textarea
            :placeholder="props.render.config.remark"
            style="padding: 10px 12px 10px 40px;border-color: #eee; width: 100%;" :rows="6"
          />
        </div>

        <!-- 添加按钮 -->
        <span
          v-if="platform === 'mobile' || (platform === 'pc' && !props.render.config.isShowRemark)"
          :class="prefix('messagebtn')"
        >
          {{ props.render.config.buttonText }}
        </span>
      </div>

      <template v-if="props.render.config.isShowRemark && platform === 'pc'">
        <div class="w-full mt-3" :class="[prefix('mesinput')]">
          <i class="iconfont icon-bianjiqi_bianji !top-2" :class="[prefix('iconfont')]" />
          <textarea
            :placeholder="props.render.config.remark"
            style="background: #F5F5F5;border-color: #eee;padding: 10px 12px 10px 40px;" :rows="10"
          />
        </div>
        <span class="mt-10" :class="[prefix('messagebtn')]">
          {{ props.render.config.buttonText }}
        </span>
      </template>

      <div v-if="platform === 'mobile'" :class="prefix('messagedata')">
        <div :class="prefix('mesdataleft')">
          <span class="whitespace-nowrap">姓*名</span>
          <span class="whitespace-nowrap">188****8686</span>
          <span :class="prefix('mesdatacourse')">课程课程课程课程课程课程课程课程课程</span>
        </div>
        <span class="whitespace-nowrap">1小时前</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.field-control-row {
  @apply flex flex-row;
}

// @media (min-width: 800px) {
//     /* 假设1024px以上是PC端 */
//     :deep(.ant-space-item) {
//       line-height: 48px !important;
//     }
// }
</style>
